<template>
  <div>
    <el-row>
      <el-col
        :span="8"
      >
        <organization-unit-tree
          @onOrganizationUnitChecked="handleOrganizationUnitChecked"
        />
      </el-col>
      <el-col :span="16">
        <el-card>
          <div
            slot="header"
          >
            <span>机构成员</span>
          </div>
          <div>
            <el-tabs>
              <el-tab-pane label="角色">
                <role-organization-uint :organization-unit-id="checkedOrganizationUintId" />
              </el-tab-pane>
              <el-tab-pane label="用户">
                <user-organization-uint :organization-unit-id="checkedOrganizationUintId" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import OrganizationUnitTree from './components/OrganizationUnitTree'
import UserOrganizationUint from './components/UserOrganizationUint'
import RoleOrganizationUint from './components/RoleOrganizationUint'

export default {
  name: 'OrganizationUint',
  components: {
    OrganizationUnitTree,
    UserOrganizationUint,
    RoleOrganizationUint
  },
  directives: { waves },
  data() {
    return {
      checkedOrganizationUintId: ''
    }
  },
  created() {
    console.log('OrganizationUint created')
  },
  methods: {
    handleOrganizationUnitChecked(id) {
      this.checkedOrganizationUintId = id
    }
  }
}
</script>
